<div class="book" style="overflow-y: auto;">
    <!-- <div class="bookSou"><input type="text" class="souInput"><div class="souBtn"><i class='iconfont icon-fangdajing'></i></div></div> -->
    <div class="bossCenZTopC">
        <div class="bossCenZTopCHead">
            我的成交率漏斗
        </div>
        <div class="bossCenZTopCN">
            <div class="bossCenZTopCNO">
                <div class="bossCenZTopCNOt">
                </div>
                <div class="bossCenZTopCNOz">
                    <span class="peoperNum">
                    </span>
                    人
                </div>
                <div class="bossCenZTopCNOw">
                </div>
            </div>
            <div class="bossCenZTopCNO">
                <div class="bossCenZTopCNOt1">
                </div>
                <div class="bossCenZTopCNOz1">
                    <span class="peoperNum1">
                    </span>
                    人
                </div>
                <div class="bossCenZTopCNOw1">
                </div>
            </div>
            <div class="bossCenZTopCNO1">
                <div class="bossCenZTopCNOt2">
                </div>
                <div class="bossCenZTopCNOz2">
                    <span class="peoperNum2">
                    </span>
                    人
                </div>
                <div class="bossCenZTopCNOw2">
                </div>
            </div>
        </div>
        <div class="bossCenZTopCNBot">
            <div class="bossCenZTopCNBotO">
                <div class="bossCenZTopCNBotOW">
                    <div class="bossCenZTopCNBotOS">
                    </div>
                </div>
                ≤ 50%
            </div>
            <div class="bossCenZTopCNBotO">
                <div class="bossCenZTopCNBotOW">
                    <div class="bossCenZTopCNBotOS1">
                    </div>
                </div>
                ≤ 80%
            </div>
            <div class="bossCenZTopCNBotO">
                <div class="bossCenZTopCNBotOW">
                    <div class="bossCenZTopCNBotOS2">
                    </div>
                </div>
                ≤ 100%
            </div>
        </div>
    </div>
    <div class="bookTop">
        <div class="bookN">
            <div class="bookNL">
            	<a href="#books" class="bookfe bookfes">所有学员</a>
                <!-- <span class="bookfe bookfes">
                    所有学员
                </span> -->
            </div>
            <div class="bookNR">
            	<a href="#bookfe1" class="bookfe1">学员标签</a>
                <!-- <span class="bookfe1">
                    学员标签
                </span> -->
            </div>
        </div>
    </div>
    <div class="bookCenter">
        <div class="bookCenterT">
            <!-- <div class="bookCx"><span class="bookName">最后活动时间</span><i class='iconfont icon-jiantousanjiaoxia bookxia'></i><i class='iconfont icon-jiantou booksh'></i></div> -->
            <div class="bookCBot">
                <a href="#activity" class="bookXuan colorBook" id="activity" sid="activity">
                    活动时间<span class="huoS">(<span class="huo">0</span>)</span>
                </a>
                <a href="#follow" class="bookXuan" id="follow" sid="follow">
                    跟进<span class="genS">(<span class="gen">0</span>)</span>
                </a>
                <a href="#rate" class="bookXuan" id="rate" sid="rate">
                    成交率<span class="chengS">(<span class="cheng">0</span>)</span>
                </a>
            </div>
        </div>
        <div class="bookCenterB">
        </div>
    </div>
    <div class="bookAdd">
        <div class="bookAddOne bookAddOneClick">
            <i class="iconfont icon-jiahaozhankai">
            </i>
            新建标签
        </div>
    </div>
    <!-- <div style="height: 33px;">
    </div> -->
</div>
<!-- <script src="__ROOT__ /AI_radar/js/index/book.min.js"> -->
</script>
<script type="text/javascript">
	$(".bookAddOneClick").click(function(){
		window.location.href=window.urls.url + `/book/add?id=0&corpid=${localStorage.getItem("CRM_corpId")}`
	})
	// console.log(window.tokens.token_boss)

    //获取成员
	function peoperAjax(names){
		// console.log(names);
 		$.ajax({
		    url:window.urls.url + "/book/list",
		    type:"POST",
		    contentType: "application/json",
		    dataType:"json",
		    data:JSON.stringify({
		      token:window.tokens.token_boss,
		      type:names
		    }),
		    success:function(res){
		      // console.log(res.data);
		      // console.log(res);
		      if($(".bookPeo").length>0){
		      	$(".bookPeo").each(function(ind,el){
		      		el.remove();
		      	})

		      }
		      var span;
		      if(res.data){
		      	// console.log(names)
		      	if(names == "activity"){
		      		$(".huo").html(res.data.length)
		      		$(".huoS").css("display","inline-block")
		      		$(".genS").css("display","none")
		      		$(".chengS").css("display","none")

		      	}
		      	if(names == "follow"){
		      		$(".gen").html(res.data.length)
		      		$(".genS").css("display","inline-block")
		      		$(".huoS").css("display","none")
		      		$(".chengS").css("display","none")
		      	}
		      	if(names == "rate"){
		      		$(".cheng").html(res.data.length)
		      		$(".chengS").css("display","inline-block")
		      		$(".huoS").css("display","none")
		      		$(".genS").css("display","none")
		      		if(document.querySelector(".bookPeosZ")){
		      			document.querySelector(".bookPeosZ").remove()
		      		}
		      		// console.log("进来了")
		      		var divs = $("<div class='bookPeosZ'><div class='bookPeos1' cid='1'><div class='bookPeosL'>80%-100%(<span class='bookPeosa1'>0</span>)</div><div class='bookPeosR'><i class='iconfont icon-jiantousanjiaoxia' id='xiaFont11'></i><i class='iconfont icon-jiantou'  id='xiaFont12'></i></div></div><div class='bookPeoss1'></div><div class='bookPeos2' cid='2'><div class='bookPeosL'>50%-80%(<span class='bookPeosa2'>0</span>)</div><div class='bookPeosR'><i class='iconfont icon-jiantousanjiaoxia' id='xiaFont21'></i><i class='iconfont icon-jiantou'  id='xiaFont22'></i></div></div><div class='bookPeoss2'></div><div class='bookPeos3' cid='3'><div class='bookPeosL'>0%-50%(<span class='bookPeosa3'>0</span>)</div><div class='bookPeosR'><i class='iconfont icon-jiantousanjiaoxia' id='xiaFont31'></i><i class='iconfont icon-jiantou'  id='xiaFont32'></i></div></div><div class='bookPeoss3'></div></div>");
				    $(divs).appendTo(".bookCenterB");
		      	}

		      	// span = $("<span class='activity'> ("+res.data.length+")</span>");
		      	res.data.forEach(function(dom,index){
		      		if(names == "rate"){
		      			if(dom.user.nickname){
			      			if(dom.rate>=80){
			      				var div = $("<div class='one bookPeo' cid='"+dom.user.id+"'><div class='ongImg'><img src='"+dom.user.avatar_url+"'></div><div class='oneName' >"+dom.user.nickname+"</div></div>");
				      			$(div).appendTo(".bookPeoss1");
			      			}
			      			if(dom.rate>=50 && dom.rate<80){
			      				var div = $("<div class='one bookPeo' cid='"+dom.user.id+"'><div class='ongImg'><img src='"+dom.user.avatar_url+"'></div><div class='oneName' >"+dom.user.nickname+"</div></div>");
				      			$(div).appendTo(".bookPeoss2");
			      			}
			      			if(dom.rate>=0 && dom.rate<50){
			      				var div = $("<div class='one bookPeo' cid='"+dom.user.id+"'><div class='ongImg'><img src='"+dom.user.avatar_url+"'></div><div class='oneName' >"+dom.user.nickname+"</div></div>");
				      			$(div).appendTo(".bookPeoss3");
			      			}
		      			}
		      		}
		      		if(names == "activity"){
		      			if(dom.user_info.nickname){
			      			var div = $("<div class='one bookPeo' cid='"+dom.user_info.id+"'><div class='ongImg'><img src='"+dom.user_info.avatar_url+"'></div><div class='activityoneName' >"+dom.user_info.nickname+"</div><div class='activityoneTi'><div class='activityoneTiT'>最后活动</div><div class='activityoneTiB'>"+dom.time+"</div></div></div>");
			      			$(div).appendTo(".bookCenterB");
			      		}
		      		}
		      		if(names == "follow"){
		      			// console.log(dom)
		      			// console.log(dom.user)

		      			// console.log(dom.user.nickname)

		      			if(dom.user){
				      		if(dom.user.nickname){
				      			var div = $("<div class='one bookPeo' cid='"+dom.user.id+"'><div class='ongImg'><img src='"+dom.user.avatar_url+"'></div><div class='activityoneName' >"+dom.user.nickname+"</div><div class='activityoneTi'><div class='activityoneTiT'>最后活动</div><div class='activityoneTiB'>"+dom.time+"</div></div></div>");
				      			$(div).appendTo(".bookCenterB");
				      		}
		      			}
		      		}
		      		
		      	})
		      	if(document.querySelector(".bookPeoss1")){
			      	// console.log(document.querySelector(".bookPeoss1"))
			      	// console.log(document.querySelector(".bookPeoss1").childNodes)
			      	$(".bookPeosa1").html(document.querySelector(".bookPeoss1").childNodes.length)
			      	$(".bookPeosa2").html(document.querySelector(".bookPeoss2").childNodes.length)
			      	$(".bookPeosa3").html(document.querySelector(".bookPeoss3").childNodes.length)
			      	$("#xiaFont11").css("display","none")
			      	$("#xiaFont21").css("display","none")
			      	$("#xiaFont31").css("display","none")
			      	// console.log(document.querySelector(".bookPeoss1"))
			      	// console.log(document.querySelector(".bookPeoss1").childNodes)
			      	if(document.querySelector(".bookPeoss1").childNodes.length == 0){
			      		var div = $("<div class='one bookPeo' style='text-align: center;display:blok'>暂无学员</div>");
			      	
			      		$(div).appendTo(".bookPeoss1");
			      	}
			      	if(document.querySelector(".bookPeoss2").childNodes.length == 0){
			      		var div = $("<div class='one bookPeo' style='text-align: center;display:blok'>暂无学员</div>");
			      	
			      		$(div).appendTo(".bookPeoss2");
			      	}
			      	if(document.querySelector(".bookPeoss3").childNodes.length == 0){
			      		var div = $("<div class='one bookPeo' style='text-align: center;display:blok'>暂无学员</div>");
			      	
			      		$(div).appendTo(".bookPeoss3");
			      	}
			    }
		      	var bookPeos1p = true;
		      	var bookPeos2p = true;
		      	var bookPeos3p = true;

		      	$(".bookPeos1").click(function(){
		      		// console.log("4545665")
		      		if(bookPeos1p){
		      			bookPeos1p = false
			      		$(".bookPeoss1").css("display","block")
			      		$(".bookPeoss2").css("display","none")
			      		$(".bookPeoss3").css("display","none")
			      		$("#xiaFont11").css("display","inline-block")
			      		$("#xiaFont12").css("display","none")

		      		}else{
		      			bookPeos1p = true
		      			$(".bookPeoss1").css("display","none")
		      			$("#xiaFont12").css("display","inline-block")
			      		$("#xiaFont11").css("display","none")

		      		}

		      	})
		      	$(".bookPeos2").click(function(){
		      		// console.log("4545665")
		      		if(bookPeos2p){
		      			bookPeos2p = false
			      		$(".bookPeoss2").css("display","block")
			      		$(".bookPeoss1").css("display","none")
			      		$(".bookPeoss3").css("display","none")
			      		$("#xiaFont21").css("display","inline-block")
			      		$("#xiaFont22").css("display","none")

			      	}else{
		      			bookPeos2p = true
		      			$(".bookPeoss2").css("display","none")
		      			$("#xiaFont22").css("display","inline-block")
			      		$("#xiaFont21").css("display","none")

		      		}

		      	})
		      	$(".bookPeos3").click(function(){
		      		// console.log("4545665")
		      		if(bookPeos3p){
		      			bookPeos3p = false
			      		$(".bookPeoss3").css("display","block")
			      		$(".bookPeoss1").css("display","none")
			      		$(".bookPeoss2").css("display","none")
			      		$("#xiaFont31").css("display","inline-block")
			      		$("#xiaFont32").css("display","none")

			      	}else{
		      			bookPeos3p = true
		      			$(".bookPeoss3").css("display","none")
		      			$("#xiaFont32").css("display","inline-block")
			      		$("#xiaFont31").css("display","none")

		      		}

		      	})
		      }else{
		      	// span = $("<span class='activity'> (0)</span>");
		      	var div = $("<div class='one bookPeo' style='text-align: center;display:blok'>暂无学员</div>");
		      	$(div).appendTo(".bookCenterB");
		      }
		      // $(span).appendTo(".colorBook");
		      var bookPeo = document.querySelectorAll(".bookPeo");
		      goto(bookPeo);

		    },
		    error:function(res){
		      console.log(res);
		      alert("请求数据失败")
		    }
		})
 	}
 	// peoperAjax("activity");

 	allAjax();
 	//获取所有标签
    function allAjax(){
        $.ajax({
            url:window.urls.url + "/book/label/list",
            type:"POST",
            contentType: "application/json",
            dataType:"json",
            data:JSON.stringify({
              token:window.tokens.token_boss,
            }),
            success:function(res){
                // console.log( JSON.parse(res.data))
                // console.log(res.data);
                if(res.data.length>0){
                	res.data.forEach(function(el,index){
	                    var divAll = "<div class='labelOne' sid='"+el.id+"'>"+el.name+"</div>";
	                    $(".bookAddOne").before(divAll);
	                });
	                var labelOne = document.querySelectorAll(".labelOne");
	                url(labelOne);
                }
                
            },
            error:function(res){
              console.log(res);
              alert("请求数据失败");
            }
        })
    }
    //进入标签
    function url(arr){
    	Array.from(arr).forEach(function(dom,ind){
    		dom.onclick = function(){
    			// console.log(dom.getAttribute("sid"))
				window.location.href=window.urls.url + `/book/add?id=${dom.getAttribute("sid")}&corpid=${localStorage.getItem("CRM_corpId")}`;
    		}
    	})
    }

 	//进入个人详情
 	function goto(arr){
 		Array.from(arr).forEach(function(doms,inds){
 			doms.onclick = function(){
 				console.log(doms.getAttribute("cid"));
 				window.location.href=window.urls.url + `/book/details?id=${doms.getAttribute("cid")}&corpid=${localStorage.getItem("CRM_corpId")}`;
 			}
 		})
 	}
	var bookPan = false;
	$(".bookfe").click(function(){
		$(".bookfe1").removeClass("bookfes");
		$(".bookfe").addClass("bookfes");
		$(".bookAdd").css("display","none");
		$(".bookCenter").css("display","block");
		if(document.querySelector(".bookPeosZ")){
  			document.querySelector(".bookPeosZ").remove()
  		}
	})
	$(".bookfe1").click(function(){
		$(".bookfe").removeClass("bookfes");
		$(".bookfe1").addClass("bookfes");
		$(".bookCenter").css("display","none");
		$(".bookAdd").css("display","block");
	})
	var bookXuan = document.querySelectorAll(".bookXuan");
	Array.from(bookXuan).forEach(function(dom,index){
		dom.onclick = function(){
			Array.from(bookXuan).forEach(function(doma,indexa){
				doma.classList.remove("colorBook");
			})
			$(".activity").remove();
			dom.classList.add("colorBook");
			// if(dom.getAttribute("sid") == "rate"){
		      		
	  //     		var divs = $("<div class='bookPeos1' cid='1'><div class='bookPeosL'>80%-100%</div></div><div class='bookPeoss1'></div><div class='bookPeos2' cid='2'><div class='bookPeosL'>50%-80%</div></div><div class='bookPeoss2'></div><div class='bookPeos3' cid='3'><div class='bookPeosL'>0%-50%</div></div><div class='bookPeoss3'></div>");
			//     $(divs).appendTo(".bookCenterB");
	  //     	}
			if(document.querySelector(".bookPeos1")){
      			// console.log("11111111111")
      			document.querySelector(".bookPeos1").remove()
      			document.querySelector(".bookPeos2").remove()
      			document.querySelector(".bookPeos3").remove()
      			document.querySelector(".bookPeoss1").remove()
      			document.querySelector(".bookPeoss2").remove()
      			document.querySelector(".bookPeoss3").remove()

      		}
			peoperAjax(dom.getAttribute("sid"));
		}
	})
	// $(".bookCx").click(function(){
	// 	console.log(bookPan)
	// 	if(bookPan){

	// 		// $(".booksh").css("display","none")
	// 		// $(".bookxia").css("display","inline-block")
	// 		// $(".bookCBot").css("display","none")
	// 		// $(".bookCenterBCang").css("display","none")
	// 		bookPan = false
	// 	}else{
	// 		// $(".bookxia").css("display","none")
	// 		// $(".booksh").css("display","inline-block")
	// 		// $(".bookCBot").css("display","block")
	// 		// $(".bookCenterBCang").css("display","block")
	// 		$(".bookCenterB").css("bac")
	// 		bookPan = true
	// 		bookuan()
	// 	}

	// })
	function bookuan(){
		var bookXuan = document.querySelectorAll(".bookXuan");
		Array.from(bookXuan).forEach(function(dom,index){
			dom.onclick = function(){
			}
		})
	}
	// $(".souBtn").click(function(){
	// 	console.log($(".souInput").val())
	// 	var souName = $(".souInput").val()
	// 	$(".bookPeo").each(function(ind,dom){
	// 		 var str = $(dom).children()[1].innerHTML
	// 	     if(str.indexOf(souName) == 0){
	// 	        // souArr.push(a)
	// 	        console.log(str)
	// 	        console.log(dom)
	// 	     }
	// 		// if($(".souInput").val() == $(dom).children()[1].innerHTML){
	// 		// 	console.log(dom)
	// 		// }


	// 	})
	// })
</script>